<section class="main-section grid_7">
	<div class="main-content">
		<header>
			<ul class="action-buttons clearfix fr">
				<li><a href="/html/help/features.html" class="button button-gray no-text help" rel="#overlay">Help<span class="help"></span></a></li>
			</ul>
			<h2>Widgets</h2>
		</header> 
		<section class="container_6 clearfix">
			<div class="grid_6">

				<div class="tabbed-pane">
					<ul class="tabs">
						<li><a href="#">Trophy Case</a></li>
						<li><a href="#">Rank</a></li>
						<li><a href="#">Points</a></li>
						<li><a href="#">Notifier</a></li>
						<li><a href="#">Leader Board</a></li>
						<li><a href="#">Milestones</a></li>
					</ul>
					<!-- tab "panes" -->
					<div class="panes clearfix">
						<section>
							<h1>Trophy Case</h1>
							<h3>Configure trophy case</h3>
							<ul class="action-buttons clearfix">
								<li><a href="/adminconsole/features/preview" class="button button-gray help" rel="#overlay">View Widget</a></li>
							</ul>
							<br />
							<h4>Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if trophy_case_values %} {% for value in trophy_case_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
											<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}', '{{value.td_id}}', 'TrophyCase')"><span class="pencil"></span>Edit</button>							
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section>
						<section>
							<h1>Rank</h1>
							<h3>Configure Rank Widget</h3>
							<ul class="action-buttons clearfix">
								<li><a href="/adminconsole/features/preview?widget=rank" class="button button-gray help" rel="#overlay">View Widget</a></li>
							</ul>
							<br />
							<h4>
<!--Note: Save values individually. -->Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if rank_values %} {% for value in rank_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
											<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}','{{value.td_id}}', 'Rank')"><span class="pencil"></span>Edit</button>
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section> 
						<section>
							<h1>Points</h1>
							<h3>Configure Points Widget</h3>
							<ul class="action-buttons clearfix">
								<li><a href="/adminconsole/features/preview?widget=points" class="button button-gray help" rel="#overlay">View Widget</a></li>
							</ul>
							<br />
							<h4>Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if points_values %} {% for value in points_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
										<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}', '{{value.td_id}}' , 'Points')"><span class="pencil"></span>Edit</button>
							
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section>
						<section>
							<h1>Notifier</h1>
							<h3>Configure Notifier Widget</h3>
							<br/>
							<button class="button button-gray" onclick="showNotifier()">Preview notification</button> 
							<br />
							<h4>Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if notifier_values %}
									{% for value in notifier_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
										<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}', '{{value.td_id}}' , 'Notifier')"><span class="pencil"></span>Edit</button>
							
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section>
						<section>
							<h1>Leader Board</h1>
							<h3>Configure Leader Board Widget</h3>
							<ul class="action-buttons clearfix">
								<li><a href="/adminconsole/features/preview?widget=leaderboard" class="button button-gray help" rel="#overlay">View Widget</a></li>
							</ul>
							<br />
							<h4>Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if leaderboard_values %}
									{% for value in leaderboard_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
										<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}', '{{value.td_id}}' , 'Leaderboard')"><span class="pencil"></span>Edit</button>
							
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section>
						<section>
							<h1>Milestones</h1>
							<h3>Configure Milestones Widget</h3>
							<ul class="action-buttons clearfix">
								<li><a href="/adminconsole/features/preview?widget=milestones" class="button button-gray help" rel="#overlay">View Widget</a></li>
							</ul>
							<br />
							<h4>Color pickers, drop downs, and
							save-all button coming soon!</h4>
							<table class="datatable">
								<thead>
									<tr>
										<th>Property</th>
										<th>Value</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									{% if milestones_values %}
									{% for value in milestones_values %}
									<tr>
										<td>{{value.name}}</td>
										<td id="{{value.td_id}}">{{value.value}}</td>
										<td id="{{value.action_id}}">
										<button class="button button-gray" onclick="editValue('{{value.id}}','{{value.value}}','{{value.save_id}}', '{{value.input_id}}','{{value.action_id}}', '{{value.td_id}}' , 'Milestones')"><span class="pencil"></span>Edit</button>
							
										</td>
									</tr>
									{% endfor %} {% endif %}
								</tbody>
							</table>
						</section>
					</div>
				</div>
			</div>
		</section>
	</div>	
</section>
{% if notifier %}
<div id="notifier">{{ notifier }}</div>
{% endif %}
